<template>
    <div class="cricle-search">
        <div class="cricle-searchuse">
            <p><Icon type="ios-aperture-outline" class="icon"/>圈子列表 <span>全部圈子</span></p>
            <div class="search">
                <input type="text" placeholder="输入圈子名称">
                <span>进入</span>
            </div>
        </div>
        <div class="cricle-use">
            <p><Icon type="ios-chatbubbles-outline" class="icon"/> <span>申请圈主</span></p>
            <ul>
                <li>
                    <img src="../../assets/meirong1.jpg" alt="">
                    <p>超级美女</p>
                </li>
            </ul>
            <div style="clear: both"></div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "CricleSearch"
    }
</script>

<style scoped lang="less">
    .cricle-search{
        .cricle-searchuse{
            p{
                color: #333333;
                font-size: 15px;
                span{
                    color: #ff5472;
                    font-size: 12px;
                    float: right;
                }
                .icon{
                    color: #ff5472;
                    font-size: 23px;
                    margin-right: 5px;
                    margin-top: -3px;
                }
            }
            .search{
                margin-top: 15px;
                width: 260px;
                height: 32px;
                border-radius: 16px;
                border: solid 1px #ff5371;
                padding: 3px 0;
                input{
                    border: none;
                    height: 25px;
                    line-height: 25px;
                    margin-left: 10px;
                    border-radius: 15px;
                }
                span{
                    float: right;
                    padding: 3px 15px;
                    border-left:1px solid #ff526e ;
                    color: #FE5371;
                }
            }
        }

        .cricle-use{
            margin-top: 15px;
            border-radius: 10px;
            border: solid 1px #ff5371;
            >p{
                width: 258px;
                height: 40px;
                background-color: #ffd0d9;
                border-radius: 10px 10px 0px 0px;
                line-height: 40px;
                >span{
                    color: #ff5472;
                    font-size: 12px;
                    border-bottom: 1px solid #ff5472;
                    float: right;
                    height: 30px;
                    margin-right: 10px;
                }
            }
            .icon{
                color: #FE5371;
                font-size: 25px;
                margin-left: 5px;
                margin-right: 5px;
            }
            li{
                margin: 15px 0  15px 15px;
                color: #ff5472;
                font-size: 12px;
                float: left;
            }
            img{
                width: 44px;
                height: 44px;
                border-radius: 50%;
            }
        }
    }

</style>